<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
        rel="stylesheet" type="text/css" />
         <script type="text/javascript"  src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q"></script>

        <script type="text/javascript" src="./scripts/markers/custommarker.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var directionDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        var start;
        var end;
        var markerTouched;
        var currentMarker;
        var clearMarkers = false;

        function initialize() {
            markerTouched = false;
            directionsDisplay = new google.maps.DirectionsRenderer();
            var chicago = new google.maps.LatLng(41.850033, -87.6500523);
            var myOptions = {
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: chicago,
                mapTypeControl: false,
                navigationControl: false,
                disableDoubleClickZoom: true,
                disableDefaultUI: true,
                scaleControl: false
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            directionsDisplay.setMap(map);

            google.maps.event.addListener(map, 'mouseover', function () {
                markerTouched = false;
                currentMarker = null;
            });
        }

        function IstMarkerTouched() {
            if (currentMarker != null)
                return 1;
            return 0;
        }

        function ClearMarker(marker) {
            if (marker != null) {
                marker.setMap(null);
            }
        }

        function addMarker(position, icon, marker) {
            ClearMarker(marker);
            var marker = new google.maps.Marker({
                position: position,
                draggable: true,
                map: map,
                icon: icon
            });

            google.maps.event.addListener(marker, 'mousedown', function () {
                markerTouched = true;
                currentMarker = start;
            });

            google.maps.event.addListener(marker, 'mouseover', function () {
                markerTouched = true;
                currentMarker = start;
            });

            google.maps.event.addListener(marker, 'mouseup', function () {
                markerTouched = false;
                currentMarker = null;
            });

            return marker;
        }

        function AddSource() {
            var position = map.getCenter();
            var icon = 'images/markers/orangelarge/image.png';
            start = addMarker(position, icon, start);
        }

        function AddDestination() {
            var position = map.getCenter();
            var icon = 'images/markers/bluelarge/image.png';
            end = addMarker(position, icon, end);
        }

        function SetSource(lat, lng) {
            var position = new google.maps.LatLng(lat, lng);
            var icon = 'images/markers/orangelarge/image.png';
            start = addMarker(position, icon, start);
            map.panTo(position);
        }

        function SetDestination(lat, lng) {

            var position = new google.maps.LatLng(lat, lng);
            var icon = 'images/markers/bluelarge/image.png';
            end = addMarker(position, icon, end);
            map.panTo(position);
        }

        function GetDirection() {
            var request = {
                origin: start.getPosition(),
                destination: end.getPosition(),
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                provideRouteAlternatives: true
            };
            ClearMarker(start);
            ClearMarker(end);            
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }

        function ZoomIn() {
            var currentZoom = map.getZoom();
            map.setZoom(currentZoom + 1);
        }

        function ZoomOut() {
            var currentZoom = map.getZoom();
            map.setZoom(currentZoom - 1);
        }

        function MoveBy(xValue, yValue) {
            if (markerTouched == false) {
                map.panBy(xValue, yValue);
            }
        }


    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas">
    </div>
</body>
</html>